<script type="text/javascript">

$( document ).ready(function() {
    var newCategoryForm = $("#addCategoryForm");
    newCategoryForm.submit(function (ev) {
		var serializedData = newCategoryForm.serialize();
        $.ajax({
            type: newCategoryForm.attr('method'),
            url: newCategoryForm.attr('action'),
            data: serializedData,
               
            success: function (data) {
            	$("#addCategoryResponseMessage").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                   alert('error... ' + xhr.responseText);
               }
        });

        ev.preventDefault();
    });    
    
});
</script>

<form method="post" action="${pageContext.request.contextPath}/categories/add" id = "addCategoryForm">
	<label for="newCategory">New category name</label>
	<input type="text" required="required" id="newCategory" name="newCategoryName">
	<br>
	<input type="submit" value="Add new category">
</form>
<div id="addCategoryResponseMessage"></div>